<template>
	<div class="contentBox ffffff mainpadding textcenter radius" style="width: 23%;">
		<div class="text_it color_three white_nowrap">设置</div>
		<div class="paddingtb" v-for="(item, index) in tabList" :key="index" @click="changeRouter(item)">
			<div class="flexcenter">
				<div :class="item.is_checked ? 'nameBox text_h color_theme pointer' : 'nameBox text_h color_three pointer'">
					{{ item.name }}
				</div>
			</div>
		</div>
		<!-- 修改密码弹窗 -->
		<el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" center top="30vh" :before-close="handleClose">
			<div class="flexleft">
				<div class="text_d color_zero margin_leftr margin_right1 white_nowrap">原密码：</div>
				<el-input placeholder="请输入原密码" v-model="oldpassword"></el-input>
			</div>
			<div class="flexleft margin_top1">
				<div class="text_d color_zero margin_leftr margin_right1 white_nowrap">新密码：</div>
				<el-input placeholder="请输入新密码" v-model="newpassword"></el-input>
			</div>
			<div class="flexleft margin_top1">
				<div class="text_d color_zero margin_right1 white_nowrap">再次输入：</div>
				<el-input placeholder="请输入再次输入新密码" v-model="renewpassword"></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editPassword">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 找回密码手机号弹窗 -->
		<el-dialog title="找回密码手机号" :visible.sync="dialogVisiblePhone" width="30%" center top="30vh"
			:before-close="handleClosePhone">
			<div class="flexleft">
				<div class="text_d color_zero margin_leftr margin_right1 white_nowrap">手机号：</div>
				<el-input placeholder="请输入手机号" v-model="bind_tel"></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisiblePhone = false">取 消</el-button>
				<el-button type="primary" @click="editPhone">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { getEditPassword,getEditPhone } from "@/API/mine"
export default {
	data() {
		return {
			tabList: [{
				name: "隐私协议",
				path: `/setUp/agreement/1`,
				is_checked: false,
			}, {
				name: "收货地址",
				path: "/setUp/address",
				is_checked: false,
			}, {
				name: "修改密码",
				path: "1",
				is_checked: false,
			}, {
				name: "黑名单管理",
				path: "/setUp/blacklistManage",
				is_checked: false,
			}, {
				name: "关于我们",
				path: "/setUp/agreement/2",
				is_checked: false,
			}, {
				name: "用户协议",
				path: "/setUp/agreement/3",
				is_checked: false,
			}, {
				name: "帮助中心",
				path: "/setUp/help",
				is_checked: false,
			}, {
				name: "找回密码手机号",
				path: 2,
				is_checked: false,
			}, {
				name: "意见反馈",
				path: "/setUp/feedback",
				is_checked: false,
			}],
			dialogVisible: false,
			dialogVisiblePhone: false,

			oldpassword: "",//原密码
			newpassword: "",//新密码
			renewpassword: "",//重复新密码
			bind_tel:"",//找回密码手机号
		}
	},
	created() {
		this.changeSelect()
	},
	methods: {
		changeSelect(hahah) {
			this.tabList.forEach(item => {
				item.is_checked = false
			})
			let index = this.tabList.findIndex(item => {
				return item.path == this.$route.path
			})
			if (index != -1) {
				this.tabList[index].is_checked = true
			}
			// this.$bus.$emit("changePathtext",hahah.path)
		},
		changeRouter(item) {
			if (item.is_checked) {
				return false
			}
			if (!item.path) {
				return false
			}
			if (item.path == 1) {
				this.dialogVisible = true
				return false
			}
			if (item.path == 2) {
				this.dialogVisiblePhone = true
				return false
			}
			this.$router.push({
				path: item.path
			})
			this.$router.afterEach((to, from) => {
				this.changeSelect(item.path)
			})
		},
		clearForm(){ //重置表单
			this.oldpassword=""
			this.newpassword=""
			this.renewpassword=""
			this.bind_tel=""
		},
		async editPassword() { //确定修改密码
			if (!this.oldpassword) {
				this.message("请输入原密码")
				return false
			}
			if (!this.newpassword) {
				this.message("请输入新密码")
				return false
			}
			if (!this.renewpassword) {
				this.message("请再次输入新密码")
				return false
			}
			if (this.renewpassword != this.newpassword) {
				this.message("两次新密码输入不一致")
				return false
			}
			let res = await getEditPassword({
				oldpassword: this.oldpassword,//原密码
				newpassword: this.newpassword,//新密码
				renewpassword: this.renewpassword,//重复新密码
			})
			if (res.data.code == 1) {
				this.toast(res.data.msg)
			} else {
				this.toast(res.data.msg, "warning")
			}
			this.clearForm()
			this.dialogVisible = false
		},
		async editPhone(){ //确定修改找回密码手机号
			if (!this.bind_tel) {
				this.message("请输入手机号")
				return false
			}
			let res = await getEditPhone({
				bind_tel: this.bind_tel,//原密码
			})
			if (res.data.code == 1) {
				this.toast(res.data.msg)
			} else {
				this.toast(res.data.msg, "warning")
			}
			this.clearForm()
			this.dialogVisiblePhone = false
		},
		handleClose(done) {
			done();
		},
		handleClosePhone(done) {
			done();
		}
	}
}
</script>

<style lang="scss" scoped>
.contentBox {
	width: 346px;
}

.imgBox {
	width: 22px;
	min-width: 22px;
	height: 22px;
}

.nameBox {
	white-space: nowrap;
}

.nameBox:hover {
	color: #3478F5;
}

.margin_leftr {
	margin-left: 13px;
}

::v-deep .el-dialog__title {
	font-size: 20px;
	font-family: PingFang SC-Heavy, PingFang SC;
	font-weight: 800;
	color: #000000;
}

::v-deep .el-dialog {
	border-radius: 8px;
}
</style>